<template>
  <el-container class="main_con">
    <div class="filter_con ds_block">
      <div class="button_area">
        <el-button v-has type="primary" size="medium" @click="addItem">新增公告</el-button>
      </div>
      <div class="filter_area">
        <el-input class="serach_input mr_15 mt_15" style="width:400px" size="medium" placeholder="地址名称" v-model="obj.title"></el-input>
        <label class="mr_15 mt_15">状态</label>
        <el-select size="medium" v-model="obj.status" placeholder="请选择" class="mr_15 mt_15">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button class="mr_15 mt_15" @click="searchList" size="medium">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table

        :data="list"
        element-loading-text="" fit highlight-current-row>
        <el-table-column prop="sort" label="排序" width="100"></el-table-column>
        <el-table-column prop="title" label="公告标题"></el-table-column>
        <el-table-column label="展现方式" width="150">
          <template slot-scope="scope">
            {{scope.row.type == 1 ? '内容' : '链接'}}
          </template>
        </el-table-column>
        <el-table-column prop="status_text" label="状态" width="150"></el-table-column>

        <el-table-column label="操作" width="190">
          <template slot-scope="scope">
            <el-button v-has type="text" @click="upDownItem(scope.row)">{{scope.row.status == 1 ? '隐藏' : '显示'}}</el-button>
            <el-button v-has type="text" @click="editItem(scope.row)">编辑</el-button>
            <el-button v-has type="text" @click="delItem(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" style="justify-content:flex-end;" v-show="total != 0">
        <el-pagination
          @current-change="changePage"
          class="pages" background hide-on-single-page layout="prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
  </el-container>
</template>

<script>
import {
  delNotice,
  editNotice,
  getNoticeList
} from '@/api/shop/announcement';
export default {
  data(){
    return {
      options:[{
        value: -1,
        label: '全部'
      }, {
        value: 1,
        label: '显示'
      }, {
        value: 0,
        label: '隐藏'
      }],
      obj:{
        title:''
      },
      objTemp:{},
      total:0,
      page:1,
      size:10,
      isLoading: false,
      list:[]
    }
  },
  components: {},
  mounted(){
    this.searchList();
  },
  methods:{
    //新增门店
    addItem(){
      //导航到新页面
      this.$router.push('/setting/shop/item');
    },
    //查询数据
    searchList(){
      //复制查询对象
      this.objTemp = {...this.obj};
      //处理status字段
      if(this.objTemp.status == -1){
        delete this.objTemp.status;
      };
      this.getDataList();
    },
    //查询数据本体
    getDataList(){
      this.isLoading = true;
      getNoticeList(this.objTemp,this.page,this.size).then(res => {
        this.isLoading = false;
        let o = res.msg;
        this.list = o.data;
        this.total = o.total;
      }).catch(e => {
        this.isLoading = false;
      });
    },
    //设置公告显示/隐藏
    upDownItem(obj){
      let _o = {
        id:obj.id
      };
      let s = '';
      if(obj.status == 1){
        //当前显示,操作后为隐藏
        _o.status = 0;
        s = '是否隐藏该公告?';
      }else if(obj.status == 0){
        //当前隐藏,操作后为显示
        _o.status = 1;
        s = '是否显示该公告?';
      };
      this.$confirm(s).then(_ => {
        this.isLoading = true;
        editNotice(_o).then(res => {
          this.isLoading = false;
          this.getDataList();
        }).catch(e => {
          this.isLoading = false;
        });
      }).catch(p => {
        //empty
      });
    },
    //编辑数据
    editItem(obj){
      this.$router.push({path:'/setting/shop/item',query:{'id':obj.id,'k':Math.random()}});
    },
    //删除数据
    delItem(id){
      this.$confirm('是否要删除该条数据？').then(_ => {
        this.isLoading = true;
        delNotice(id).then(res => {
          this.isLoading = false;
          //重新加载数据
          this.getDataList();
        })
      }).catch(_ => {
        //出错
      })
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    }
  }
}
</script>

<style lang="scss" scoped>
.default{
  color: #2d8cf0;
  background-color: #F0FAFF;
  margin-left: 10px;
  font-size: 12px;
  display: inline-block;
  padding: 1px 5px 0;
  border-radius: 5px;
}
</style>
